<template>
  <div class="ProductList">
    <div class="title">
      {{productType}}
    </div>
    <grid :border="false" :column-num="3">
      <grid-item
        v-for="item in dataList"
        :key="item.id"
        @click="showDetail(item)">
        <van-image :src="item.imgPath" />
        <dev class="list-text">{{item.product_name}}</dev>
      </grid-item>
    </grid>
  </div>
</template>

<script>
import { Grid, GridItem, Image as VanImage, ImagePreview } from 'vant'
export default {
  name: 'ProductList',
  components: {
    Grid,
    GridItem,
    VanImage,
    ImagePreview
  },
  data () {
    return {
    }
  },
  props: {
    dataList: {
      type: Array
    },
    productType: {
      type: String
    }
  },
  created () {},
  mounted () {},
  methods: {
    showDetail (data) {
      ImagePreview([
        data.imgPath
      ])
    }
  }
}
</script>

<style scoped lang="scss">
  .ProductList {
    .title {
      width: 90%;
      border: 1px solid #8c939d;
      background-color: #e4e7ed;
      padding: 8px;
      margin: 0 auto;
      text-align: center;
      font-weight: 600;
      letter-spacing: 20px;
      border-radius: 20px;
      margin-top: 10px;
    }

    .list-text {
      text-align: center;
      font-size: 12px;
      background-color: #66b1ff;
      width: 100%;
      color: #ffffff;
    }
  }
</style>
